<template>
  <div class="share">
    <div class="body-content">
      <div class="logo">
        <span class="iconfont icon-pan"></span>
        <span class="name">皓明云盘</span>
      </div>
      <div class="code-panel" v-show="shareFlag">
        <div class="file-info">

          <img  class="fail-img" src="../../assets/share_cry.png"/>
        </div>
        <div class="code-body">
          <div class="fail-area">
            <span class="fail-info">啊哦，你来晚了，分享的文件失效了。</span>
          </div>
        </div>
      </div>
      <div class="code-panel" v-show="!shareFlag">
        <div class="file-info">
          <div class="avatar">
            <Avatar :userId="shareInfo.userId" :width="50"></Avatar>
          </div>
          <div class="share-info">
            <div class="user-info">
              <span class="nick-name">{{ shareInfo.nickName }}</span>
            </div>
            <div class="file-name">
              <span class="share-time">分享于：{{ shareInfo.shareTime }}</span>
              <!-- <span>分享文件:</span
              ><span style="margin-left: 20px">{{ shareInfo.fileName }}</span> -->
            </div>
          </div>
        </div>
        <div class="code-body">
          <div class="input-area">
            <div class="input">
              <el-form
                :model="formData"
                :rules="rules"
                ref="formDataRef"
                @submit.prevent
              >
                <!--input输入-->
                <el-form-item prop="code">
                  <el-input
                    size="large"
                    placeholder="请输入提取码"
                    clearable
                    v-model="formData.code"
                    @keyup.enter="checkShare"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="input-btn">
              <el-button
                style="width: 100%"
                type="primary"
                size="large"
                @click="checkShare"
                >提取文件</el-button
              >
            </div>
            <div class="input-expireTime">
              <span v-if="shareInfo.expireTime != null"
                >有效期:{{ shareInfo.expireTime }}</span
              >
              <span v-else>永久有效</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { GetShareInfo, CheckShareCode } from "@/api/showShare";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const shareId = route.params.shareId;
const shareInfo = ref({});
var shareFlag = false;

const getShareInfo = async () => {
  let params = {
    shareId: shareId,
  };
  let result = await GetShareInfo(params);
  if (!result) {
    
    shareFlag = true;
    proxy.$forceUpdate();
    return;
  }
  
  shareInfo.value = result.data;
};
onMounted(() => {
  getShareInfo();
});

const formData = ref({});
const formDataRef = ref();
const rules = {
  code: [{ required: true, message: "请输入提取码" }],
};
const checkShare = async ()=>{
  formDataRef.value.validate(async (valid)=>{
    if(!valid){
      return;
    }
    let params = {
      shareId:shareId,
      code:formData.value.code,
    };
    
    let result = await CheckShareCode(params);
    if(!result){
      proxy.Message.warning(`提取码错误！`)
      return;
    }
    router.push(`/share/${shareId}`);
  })
}
</script>

<style lang="scss" scoped>
.share {
  height: calc(100vh);
  background: url("../../assets/share_bg.png");
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-color: #eef2f6;
  display: flex;
  justify-content: center;
  .body-content {
    margin-top: calc(100vh / 5);
    width: 500px;
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-pan {
        font-size: 60px;
        color: var(--theme2);
      }
      .name {
        font-weight: bold;
        margin-left: 5px;
        font-size: 25px;
        color: var(--theme2);
      }
    }
    .code-panel {
      margin-top: 20px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 0 7px 1px #5757574f;
      .file-info {
        border-radius: 16px 16px 5px 5px;
        box-shadow: 0 3px 7px 1px #5757574f;

        padding: 10px 20px;
        background: var(--theme2);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .fail-img{
          width: 60px;
          height: 60px;
        }
      }
      .avatar {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        width: 60px;
        border-radius: 50%;
        background-color: var(--theme);
      }
      .share-info {
        width: 100%;
        .user-info {
          margin-top: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          .nick-name {
            font-size: 15px;
          }
          .share-time {
            margin-left: 20px;
            font-size: 12px;
          }
        }
        .file-name {
          display: flex;
          justify-content: center;
          margin-top: 8px;
          font-size: 12px;
        }
      }
    }
    .code-body {
      padding: 30px 20px 30px 20px;
      .tips {
        font-weight: bold;
      }
      .input-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        .input {
          width: 100%;
        }
        .input-btn {
          margin-top: 10px;
          width: 60%;
        }
        .input-expireTime {
          margin-top: 20px;
          color: var(--icon);
          font-size: 12px;
        }
      }
      .fail-area{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .fail-info{
          color:  rgba($color: #000000, $alpha: 0.6);
          font-size: 22px;
        }
      }
    }
  }
}
</style>